<template>
  <div>
    <!-- 打电话弹出层 -->
    <van-action-sheet
      v-model="sheetShow"
      :actions="actions"
      @select="onSelect"
      cancel-text="取消"
      @cancel="onCancel"
    />
    <!-- 展示图 -->
    <div class="relative">
      <div
        @click="$router.go(-1)"
        class="bg-rgba-black fixed left-10 top-10 z-index-10 b-round p-12 flex a-center"
      >
        <van-icon class="text-white" name="arrow-left" />
      </div>
      <div class="bg-grey">
        <img class="w-full min-h-50" :src="detail.agencyImage" alt />
      </div>
    </div>
    <!-- 商家标题 -->
    <div class="p-10 b-b">
      <p class="fs-rem-16px text-title">{{detail.name}}</p>
      <div class="flex j-between m-t-10">
        <p v-if="detail.agencyStar !== 0" class="flex a-center">
          <van-rate v-model="detail.agencyStar" color="#fd4f51" readonly allow-half />
          <span class="m-l-10 fs-rem-14px text-red">{{detail.agencyStar}}分</span>
        </p>
        <span
          class="p-v-3 p-h-5 fs-rem-12px b-r-5 bg-block-grey text-content"
        >营业时间 {{detail.agencyOpeningHours}}</span>
      </div>
    </div>
    <!-- 商家位置 -->
    <div class="flex j-between a-start p-10 b-b">
      <div>
        <p class="fs-rem-14px text-content">{{detail.address}}</p>
        <p class="fs-rem-12px text-grey">距我直线1.1km</p>
      </div>
      <!-- <router-link
        tag="div"
        :to="{path: '/map', query: {lng:detail.agencyLng,lat: detail.agencyLat, name: detail.name}}"
        class="flex a-center j-end fs-rem-12px text-red min-w-80"
      >
        <span>地图/导航</span>
        <van-icon name="arrow" />
      </router-link>-->
      <div @click="toApp()" class="flex a-center j-end fs-rem-12px text-red min-w-80">
        <span>地图/导航</span>
        <van-icon name="arrow" />
      </div>
    </div>
    <!-- 商家标签 -->
    <div class="p-10 b-b flex a-center j-between">
      <div>
        <van-tag
          v-for="item in detail.agencyService"
          :key="item"
          class="bg-block-grey text-grey m-r-5"
        >{{item}}</van-tag>
      </div>
      <van-icon @click="handleOpenSheet()" class="text-red" size="20" name="phone-o" />
    </div>
    <!-- tab -->
    <div>
      <van-tabs sticky @change="tabChange">
        <van-tab title="优惠信息">
          <merchant-goods v-if="detail.id" :bid="detail.id" />
        </van-tab>
        <van-tab title="商家评论">
          <van-skeleton avatar :row="4" avatar-size="80" avatar-shape="square" :loading="!ready">
            <van-list
              v-model="listControl.loading"
              :finished="listControl.pages === 0 || listPage.current === listControl.pages"
              finished-text="没有更多了"
              @load="getMoreData('商家评论')"
              :immediate-check="false"
            >
              <merchant-evaluate :list="list" />
            </van-list>
          </van-skeleton>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 模块 -->
    <div></div>
  </div>
</template>

<script>
import MerchantEvaluate from './components/MerchantEvaluate'
import MerchantGoods from './components/MerchantGoods'
export default {
  data () {
    return {
      ready: false,
      detail: {},
      list: [],
      listPage: {
        size: 10,
        current: 1
      },
      listControl: {
        pages: null,
        loading: false
      },
      rateValue: 3.5,
      sheetShow: false,
      actions: [{ name: null }]
    }
  },
  components: {
    MerchantEvaluate,
    MerchantGoods
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.getMerchantDetail()
    },
    handleOpenSheet () {
      this.actions[0].name = this.detail.tel || ''
      this.sheetShow = true
    },
    onSelect (item) {
      this.sheetShow = false
      window.location.href = `tel:${item.name}`
    },
    onCancel () {
      this.sheetShow = false
    },
    async tabChange (item, title) {
      this.listPage = {
        size: 10,
        current: 1
      }
      this.listControl = {
        pages: null,
        loading: false
      }
      this.list = []
      if (title === '商家评论') {
        this.getEvaluate()
      }
    },
    async getMerchantDetail () {
      this.ready = false
      let { id } = this.$route.params
      let { zxOrg } = await this.$api.post('/zxGd/query', {
        bid: id
      })
      if (!zxOrg) {
        this.$toast.fail({
          message: '暂无商家信息',
          duration: 1000
        })
        this.$router.push('/')
        return
      }
      zxOrg.agencyService = zxOrg.agencyService.split(',')
      zxOrg.agencyStar = +zxOrg.agencyStar
      this.detail = zxOrg
    },
    async getEvaluate () {
      this.ready = false
      let { id } = this.$route.params
      let { page } = await this.$api.post('/pj/query', {
        bid: id,
        current: this.listPage.current,
        size: 10
      })
      let { pages, current } = page
      page.records = page.records.filter(d => d.status === 1)
      this.listPage.current = current
      this.listControl.pages = pages
      this.listControl.loading = false
      this.list = [...this.list, ...page.records]
      this.ready = true
    },
    changeSwiperIndex (index) {
      this.swiperCurrentIndex = index
    },
    getMoreData (title) {
      // 分页查询附近商家
      this.listPage.current++
      if (title === '商家评论') {
        this.getEvaluate()
      } else if (title === '优惠信息') {
        this.getMerchantDetail()
      }
    },
    toApp () {
      this.$dialog.confirm({
        title: '地图选择',
        message: '目前有两个地图的页面选择, 一个是直接到百度地图页面, 一个是到我们App页面展示。测试体验下我们用哪个?',
        cancelButtonText: '百度地图页面',
        confirmButtonText: 'app页面',
        confirmButtonColor: '#fd4f51'
      }).then(() => {
        this.$router.push({ path: '/map', query: { lng: this.detail.agencyLng, lat: this.detail.agencyLat, name: this.detail.name } })
      }).catch(() => {
        window.location = `http://api.map.baidu.com/marker?location=${this.detail.agencyLat},${this.detail.agencyLng}&title=商家位置&content=${this.detail.name}&output=html`
      })
    }
  }
}
</script>
